<template>
  <div>
    <el-card style="margin: 20px">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="searchForm.title" placeholder="请输入公告标题" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <div style="height: 620px">
      <el-card style="margin: 10px;height: 600px;overflow: auto">
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            prop="title"
            label="公告标题"
          >
          </el-table-column>
          <el-table-column
            prop="content"
            label="公告内容"
          >
          </el-table-column>
          <el-table-column
            prop="publisher"
            label="发布人"
          >
          </el-table-column>
          <el-table-column
            prop="publishTime"
            label="发布时间"
          >
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作">
            <template slot-scope="scope">
              <el-button-group>
                <el-button icon="el-icon-warning-outline" size="small" type="primary" plain @click="showDialog(scope.row)">编辑</el-button>
                <el-button icon="el-icon-circle-close" size="small" type="danger" plain @click="delFood(scope.row.id)">删除</el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>

    <el-dialog
      title="修改信息"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">

      <el-form :model="editForm" :rules="rules" ref="addForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="菜品名称" prop="foodName">
          <el-input v-model="editForm.foodName"></el-input>
        </el-form-item>
        <el-form-item label="菜品价格" prop="price">
          <el-input v-model="editForm.price"></el-input>
        </el-form-item>
        <el-form-item label="菜品介绍" prop="introduce">
          <el-input v-model="editForm.introduce"></el-input>
        </el-form-item>
        <el-form-item label="菜品介绍" prop="introduce">
          <el-select v-model="editForm.foodType" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜品封面" prop="savepath">
          <el-upload
            class="upload-demo"
            :on-change="handleChange"
            :on-success="handleSuccess"
            :show-file-list="false"
            action="http://localhost:8080/upload/imgUpload">
            <img size="large" :src="getImg(editForm.savepath)" width="150"/>
          </el-upload>
          <!--          <el-upload-->
          <!--            class="upload-demo"-->
          <!--            action="http://localhost:8080/upload/imgUpload"-->
          <!--            :on-change="handleChange"-->
          <!--            :on-success="handleSuccess"-->
          <!--            list-type="picture">-->
          <!--            <el-button size="small" type="primary">点击上传</el-button>-->
          <!--            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
          <!--          </el-upload>-->
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="edit">确 定</el-button>
      </span>
    </el-dialog>


    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

  </div>
</template>

<script>
export default {
  name: "noticeList",
  data(){
    return{
      searchForm: {
        title: ""
      },
      options: [{value: 1, label: "清蒸"},{value: 2, label: "水煮"},{value: 3, label: "爆炒"},{value: 4, label: "甜品"}],
      tableData:[],
      updateFood:{},
      dialogVisible: false,
      editForm:{},
      rules: {
        foodName:[{ required: true, message: '请输入食品名称', trigger: 'blur' }],
        price:[{ required: true, message: '请输入价格', trigger: 'blur' }],
        introduce:[{ required: true, message: '请输入简介', trigger: 'blur' }],
        foodType:[{ required: true, message: '请输选择类型', trigger: 'blur' }],
        savepath:[{ required: true, message: '请上传图片', trigger: 'blur' }]
      },
      currentPage: 1,
      pageSize: 5,
      total: 0
    }
  },
  created() {
    this.listBy()
  },
  methods:{
    handleSizeChange(val){
      console.info("handleSizeChange", val)
      this.pageSize = val
      this.listBy()
    },
    handleCurrentChange(val){
      console.info("handleCurrentChange", val)
      this.currentPage = val
      this.listBy()
    },
    edit(){
      this.axios.post("http://localhost:8080/food/update", this.editForm).then(res => {
        if (res.data.code == 200) {
          this.$message.success("修改成功")
          this.dialogVisible = false
          this.listBy()
        }
      })
    },
    handleChange(file, fileList){
      if (fileList.length > 1) {
        fileList.splice(0, 1);
      }
      // console.info(file)
      // this.imageUrl = URL.createObjectURL(file.raw);
      // console.info(this.imageUrl)
    },
    handleSuccess(response){
      this.$message.success("上传文件成功！")
      console.info(response.data)
      let path = response.data
      this.editForm.savepath = path
    },
    showDialog(row){
      console.info(row)
      this.editForm = JSON.parse(JSON.stringify(row))
      this.dialogVisible = true
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    delFood(id){
      this.$confirm("确定要删除该食品吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      }).then(() => {
        this.axios.delete("http://localhost:8080/food/del?id="+id).then(res => {
          console.info(res.data)
          if (res.data.code == 200) {
            this.$message.success("删除成功！")
            this.listBy()
          }
        })
      })

    },
    handSwitchChange(val, row){
      console.info(val)
      this.updateFood = row
      console.info(this.updateFood)
      this.axios.post("http://localhost:8080/food/update", this.updateFood).then(res => {
        console.info(res.data)
      })
    },
    getType(t){
      switch (t){
        case 1 : return '清蒸'
        case 2 : return '水煮'
        case 3 : return '爆炒'
        case 4 : return '甜品'
      }

    },
    getImg(path){
      return "http://localhost:8080/pic/" + path
    },
    onSubmit(){
      // console.info(this.searchForm)
      this.listBy()
    },
    listBy(){
      this.axios.get("http://localhost:8080/notice/getByPage?title="+this.searchForm.title+"&page="+this.currentPage+"&size="+this.pageSize).then(res => {
        console.info(res.data)
        this.tableData = res.data.data.rows
        this.total = res.data.data.total
      })
    }
  }
}
</script>

<style scoped>

</style>
